<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<title>메인 페이지</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<style>
body {
	margin: 0;
	padding: 0;
}

header {
	margin: 0;
	padding: 0;
	font-weight: bold;
	width: 920px;
}

h1 {
	margin: 0;
	text-align: center;
	padding: 10px 0 20px 0;
}

h2 {
	margin: 0;
	text-align: right;
	FONT-SIZE: 9pt;
}

h2 a:link {
	text-decoration: none;
	FONT-SIZE: 9pt;
	color: #929292;
}

h2 a:visited {
	text-decoration: none;
	FONT-SIZE: 9pt;
}

h2 a:hover {
	text-decoration: none;
	FONT-SIZE: 9pt;
}

h2 a:active {
	text-decoration: none;
	FONT-SIZE: 9pt;
}

a {
	FONT-SIZE: 13pt;
}

.menu {
	text-align: center;
}

.menu ul {
	display: inline-block;
	width: 920px;
	padding: 8px 0 10px 0;
}

.menu ul li {
	float: left;
	position: relative;
	width: 20%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;FONT-SIZE: 13pt;
}

.menu ul li a {
	color: #fff;FONT-SIZE: 13pt;text-shadow: 0 1px 3px #292929;
}

.menu ul li div {
	display: none;
	position: absolute;
	z-index:999;
	width: 100%;
	height: auto;
	left: 0;
	top: 28px;
	background-color: black;
}

.menu ul li div ul {
	width: 100%;
	padding: 0;
	line-height: 35px;
}

.menu ul li div ul li {
	float: none;
	width: auto;
}

.menu ul li.on div ul li a,
.menu ul li div ul li a {
	color: #fff;
	FONT-SIZE: 10pt;
}

.menu ul li.on div ul li a:hover,
.menu ul li div ul li a:hover {
	color: #5bbcb1;
}
</style>

</head>

<body>

	<header>
		<h2>
			<s:if test='%{session.id == null}'>
				<a href="loginForm.action">로그인</a>  |
			<a href="joinAgree.action">회원가입</a>  |
			<a href="#none">고객센터</a>  |
			<a href="#none"><img src="./img/icon_star.gif"> 즐겨찾기추가</a>
			</s:if>
			<s:elseif test='%{session.admin == "admin"}'>
				<a href="admin.action">관리자 메뉴</a>  |
			<a href="logout.action">로그아웃</a>  |
			<a href="#none"><img src="./img/icon_star.gif"> 즐겨찾기추가</a>
			</s:elseif>
			<s:elseif test='%{session.id != null}'>
				<a href="mypageView.action">마이 페이지</a>  |
			<a href="logout.action">로그아웃</a>  |
			<a href="#none"><img src="./img/icon_star.gif"> 즐겨찾기추가</a>
			</s:elseif>
		</h2>
		<h1>
			<a href="main.action"><img src="./img/ci_logo.jpg"></a>
		</h1>

		<nav class="menu">
			<ul>
				<li class="menu01"><a href="#none">캐리비안비치</a>
					<div class="menu-sub">
						<ul>
							<li><a href="introduce.action">캐리비안비치 소개</a></li>
							<li><a href="tour.action">부대시설 안내</a></li>
							<li><a href="map.action">오시는 길</a></li>
						</ul>
					</div></li>
				<li class="menu02"><a href="#none">공지사항&이벤트</a>
					<div class="menu-sub">
						<ul>
							<li><a href="csNoticeList.action">공지사항</a></li>
							<li><a href="csEventList.action">이벤트</a></li>
							<li><a href="#none">&nbsp;</a></li>
						</ul>
					</div></li>
				<li class="menu03"><a href="#none">생생이용후기</a>
					<div class="menu-sub">
						<ul>
							<li><a href="#none">이용후기</a></li>
							<li><a href="#none">&nbsp;</a></li>
							<li><a href="#none">&nbsp;</a></li>
						</ul>
					</div></li>
				<li class="menu04"><a href="#none">예약&예매</a>
					<div class="menu-sub">
						<ul>
							<s:if test='%{session.id == null}'>
							<li><a href="csResLogin.action">예약하기</a></li>
							<li><a href="csResLogin2.action">예약조회 /취소</a></li>
							<li><a href="#none">&nbsp;</a></li>
							</s:if>
							<s:else>
							<li><a href="#none">예약하기</a></li>
							<li><a href="csResList.action">예약조회 /취소</a></li>
							<li><a href="#none">&nbsp;</a></li>
							</s:else>
						</ul>
					</div></li>
				<li class="menu05"><a href="#none">고객센터</a>
					<div class="menu-sub">
						<ul>
							<li><a href="csQnaReg.action">1:1질문</a></li>
							<li><a href="csFaqList.action">FAQ</a></li>
							<li><a href="#none">&nbsp;</a></li>
						</ul>
					</div></li>
			</ul>
		</nav>
	</header>

	<script type="text/javascript">
		$(".menu>ul>li>a").mouseover(function() {
			$(".menu>ul>li").removeClass("on");
			if ($(".menu-sub").is(":hidden")) {
				$(this).parents().addClass("on");
				$(".menu-sub").slideDown(200);
			}
		});
		$(".menu-sub").mouseover(function() {
			$(".menu>ul>li").removeClass("on");
			$(this).parents().addClass("on");
		});
		$(".menu").mouseleave(function() {
			if ($("div.menu-sub").is(":visible")) {
				$(".menu>ul>li").removeClass("on");
				$(".menu-sub").slideUp(200);
			}
		});
	</script>

</body>

</html>